<template>
  <svg 
    :width="size" 
    :height="size" 
    :viewBox="viewBox" 
    :class="['svg-icon', `icon-${name}`]"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path v-if="iconPath" :d="iconPath" :fill="fill" />
    <g v-else-if="iconContent" v-html="iconContent"></g>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  name: string
  size?: number | string
  fill?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  fill: 'currentColor'
})

const iconData: Record<string, { path?: string; content?: string; viewBox?: string }> = {
  // 文件类型图标
  'folder': {
    path: 'M20 6h-2l-2-2H8L6 6H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z',
    viewBox: '0 0 24 24'
  },
  'file': {
    path: 'M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z',
    viewBox: '0 0 24 24'
  },
  'image': {
    path: 'M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z',
    viewBox: '0 0 24 24'
  },
  'video': {
    path: 'M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z',
    viewBox: '0 0 24 24'
  },
  'audio': {
    path: 'M12,3V13.55C11.41,13.21 10.73,13 10,13A3,3 0 0,0 7,16A3,3 0 0,0 10,19A3,3 0 0,0 13,16V7H19V5H12Z',
    viewBox: '0 0 24 24'
  },
  'pdf': {
    path: 'M14,9H15.5L14.5,7.5H14V9M16,3.5A0.5,0.5 0 0,1 16.5,4V16A0.5,0.5 0 0,1 16,16.5H8A0.5,0.5 0 0,1 7.5,16V4A0.5,0.5 0 0,1 8,3.5H16M8,2A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H16A2,2 0 0,0 18,16V4A2,2 0 0,0 16,2H8Z',
    viewBox: '0 0 24 24'
  },
  'archive': {
    path: 'M14,17H12V19H14V17M14,13H12V15H14V13M20,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3Z',
    viewBox: '0 0 24 24'
  },
  'code': {
    path: 'M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z',
    viewBox: '0 0 24 24'
  },
  'document': {
    path: 'M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2Z',
    viewBox: '0 0 24 24'
  },
  'spreadsheet': {
    path: 'M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H3A2,2 0 0,1 1,16V4A2,2 0 0,1 3,2H21M8,6V8H16V6H8M8,10V12H11V10H8M13,10V12H16V10H13M8,14V16H11V14H8M13,14V16H16V14H13Z',
    viewBox: '0 0 24 24'
  },
  'presentation': {
    path: 'M13,16.5L9,12.5L13,8.5V11H22V14H13V16.5M2,5V19H7V21H9V19H15V21H17V19H22V5H2M20,7V17H4V7H20Z',
    viewBox: '0 0 24 24'
  },
  'executable': {
    path: 'M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6A2,2 0 0,1 10,4A2,2 0 0,1 12,2M21,9V7L15,1H5C3.89,1 3,1.89 3,3V7H5V3H14L19,8V9H21M7,15H9V17H7V15M11,15H13V17H11V15M15,15H17V17H15V15Z',
    viewBox: '0 0 24 24'
  },
  
  // 操作图标
  'home': {
    path: 'M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z',
    viewBox: '0 0 24 24'
  },
  'refresh': {
    path: 'M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z',
    viewBox: '0 0 24 24'
  },
  'upload': {
    path: 'M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z',
    viewBox: '0 0 24 24'
  },
  'upload-file': {
    path: 'M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z',
    viewBox: '0 0 24 24'
  },
  'upload-folder': {
    path: 'M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H20M14,9V12H16L12,16L8,12H10V9H14Z',
    viewBox: '0 0 24 24'
  },
  'download': {
    path: 'M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z',
    viewBox: '0 0 24 24'
  },
  'link': {
    path: 'M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z',
    viewBox: '0 0 24 24'
  },
  'edit': {
    path: 'M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z',
    viewBox: '0 0 24 24'
  },
  'delete': {
    path: 'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z',
    viewBox: '0 0 24 24'
  },
  'add': {
    path: 'M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
    viewBox: '0 0 24 24'
  },
  'close': {
    path: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
    viewBox: '0 0 24 24'
  },
  'menu': {
    path: 'M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z',
    viewBox: '0 0 24 24'
  }
}

const iconPath = computed(() => iconData[props.name]?.path)
const iconContent = computed(() => iconData[props.name]?.content)
const viewBox = computed(() => iconData[props.name]?.viewBox || '0 0 24 24')
</script>

<style lang="less" scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease;
}
</style> 